<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <!-- 引入ElementUI样式 -->
    <link type="text/css" rel="stylesheet" href="../css/index.css">
    <!-- 引入Vue组件库 -->
    <script type="text/javascript" src="../js/vue.js"></script>
    <!-- 引入ElementUI组件库 -->
    <script type="text/javascript" src="../js/index.js"></script>
    <script type="text/javascript" src="../js/axios.min.js"></script>
    <style>
        .yydh {width: 350px;height: 40px;margin-left: -20px;background-color: #77c588;border-radius: 15px;color: cornsilk;line-height: 40px;}
        .box-card{margin-bottom: 20px}
        .header{font-size: 28px;font-width: bolder;text-align: center;margin: 20px 0;}
        .qxdd{float: right;margin: -20px 20px 20px 0;}
        #wuData{height: 200px;line-height: 200px;font-size: 24px;color: crimson;text-align: center;}
        .quit{margin-top: -40px;float: right;color: chocolate;display: block;}
    </style>
</head>
<body>
<div id="app">
    <el-row>
        <el-col :span="18" :offset="3"><div class="grid-content">
            <div class="header">请核对挂号信息并支付</div>
            <div class="quit">
                <el-link :underline="false" type="danger" @click="quit()">退出</el-link>
            </div>
            <div v-for="item in data">
                <el-card class="box-card" shadow="never">
                    <div class="yydh"><i class="el-icon-star-on"></i>订单号：{{item.reservation.pnum}}</div>
                    <span class="qxdd"> <el-button type="danger" size="medium" round @click="open(item.reservation.id)">取消订单</el-button></span>
                    <el-descriptions>
                        <el-descriptions-item label="预约人">{{item.reservation.name}}</el-descriptions-item>
                        <el-descriptions-item label="年龄">{{item.reservation.age}}</el-descriptions-item>
                        <el-descriptions-item label="就诊医生">{{item.accountName}}</el-descriptions-item>
                        <el-descriptions-item label="预约时间">{{item.reservation.createTime}}</el-descriptions-item>
                        <el-descriptions-item label="就诊时间">{{item.reservation.visitTime}}</el-descriptions-item>
                        <el-descriptions-item label="预约科室">{{item.sectionName}}</el-descriptions-item>
                        <el-descriptions-item label="备注">
                            <el-tag size="small">预约成功</el-tag>
                        </el-descriptions-item>
                    </el-descriptions>
                </el-card>
            </div>
            <div id="wuData" v-show="data.length == 0">暂无预定订单数据！</div>
        </div></el-col>
    </el-row>
</div>


<script>
    new Vue({
        el: "#app",
        data: {
            data:[],
            timer:null,
        },
        created() {
           this.getParams();
        },
        methods: {
            getParams(){
                axios.get("/ReservationQian/cancelList").then(resp=>{
                    this.data = resp.data.data;
                    console.log(this.data.length)
                })
            },
            //取消预约
            open(id) {
                this.$confirm('是否要取消预约, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.cancelForm(id);
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消'
                    });
                });
            },

            cancelForm(id){
                axios.get("/ReservationQian/cancel?id="+id).then(resp=>{
                    this.$message({
                        type: 'success',
                        message: '取消预约成功!'
                    });
                    this.getParams();
                })
            },

            quit(){
                axios.get("/ReservationQian/quitCancel").then(resp=>{
                    clearTimeout(this.timer); //清除延迟执行
                    this.timer = setTimeout(()=>{  //设置延迟执行
                        location.href  = "cancelReservation.jsp";
                    },1000);
                })
            }
        },
    })
</script>

</body>
</html>